<template>
	<div class="padding-across-10 main" v-loading="loading" element-loading-text="拼命加载中">
		<div style="width: 100%;">
			<headerOpreate style="padding-bottom: 3px" :opreate-datas="opreateDatas" v-on:executeAction="executeAction"></headerOpreate>
		</div>
		<!--     <div class="block" style="text-align:right;float: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next, jumper"
          :total="totalSize">
        </el-pagination>
    </div> -->
    <el-table border style="width: 100%;" :data="tableData" @selection-change="handleSelectionChange">
    	<el-table-column type="selection" align="center"></el-table-column>
    	<el-table-column label="书名" align="center" prop="name"></el-table-column>
    	<el-table-column label="条码" align="center" prop="barcode"></el-table-column>
    	<!-- <el-table-column label="标签" align="center" prop="booktag"></el-table-column> -->
    	<el-table-column label="预借时间" align="center" prop="preborrowtime"></el-table-column>
    	<el-table-column label="到期时间" align="center" prop="canceltime"></el-table-column>
    	<el-table-column :show-overflow-tooltip="true" label="状态" align="center">
    		<template slot-scope="scope">
    			<el-tag type="success" v-if="scope.row.isvalid">有效</el-tag>
    			<el-tag type="danger" v-else>无效</el-tag>
    		</template>
    	</el-table-column>
    </el-table>
    <div class="block" style="text-align:right;margin-bottom:60px;padding-top: 1px">
    	<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :page-size="pageSize" layout="total,sizes, prev, pager, next, jumper" :total="totalSize">
    	</el-pagination>
    </div>
</div>
</template>
<script>
	import $ from 'jquery'
	import { GloabFun, HttpServer } from '../../../assets/js/common.js'
	import headerOpreate from '../../../components/headerOpreate'
	let id = 1000;
	var date = new Date();
	export default {
		components: {
			headerOpreate
		},
		data() {
			Date.prototype.format = function(format) {
				var date = {
					"M+": this.getMonth() + 1,
					"d+": this.getDate()
				};
				if(/(y+)/i.test(format)) {
					format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
				}
				for(var k in date) {
					if(new RegExp("(" + k + ")").test(format)) {
						format = format.replace(RegExp.$1, RegExp.$1.length == 1 ?
							date[k] : ("00" + date[k]).substr(("" + date[k]).length));
					}
				}
				return format;
			}
			return {
				loading: false,
				tableData: [],
				multipleSelection: [],
				currentPage: 1,
				pageSize: 10,
				totalSize: 0,
				opreateDatas: [{
					show: true,
					size: "small",
					type: 'primary',
					icon: 'el-icon-eleg-icon_refresh el-icon--left',
					name: this.$t("message.refresh"),
					action: 'reloadDatas'
				},
					//        {
					//          show: true,
					//          size:"small",
					//          type:'danger',
					//          icon:'el-icon-circle-cross el-icon--left',
					//          name:'取消预借',
					//          action:'cancelPreborrow'
					//        }
					],
				}
			},
			props: {
				templateObj: {
					type: Object,
					default: function() {
						return {};
					}
				}
			},
			methods: {
				executeAction(action) {
					if(action) {
						this[action]();
					}
				},
				handleCurrentChange(val) {
					this.currentPage = val;
					this.getDatas();
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.getDatas();
				},
				handleSelectionChange(val) {
					this.multipleSelection = val;
				},
				formateSelectData() {
					var result = [],
					array = this.multipleSelection;
					array.forEach(function(item) {
						result.push(item.barcode)
					})
					return result;
				},
			//取消预借
			cancelPreborrow() {
				if(this.formateSelectData().length > 0) {
					this.$confirm('此操作将取消所选图书预借信息，是否继续？', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						HttpServer.httpPost2.call(this, '/Api/Reader/Preborrow/Cancel', {
							code: GloabFun.getReaderCode(),
							barcode: this.formateSelectData(),
							sn: '',
							uid: '',
							token: ''
						}, function(response) {}, function(response) {
							if(response.data.code === 0) {
								this.$message({
									type: 'success',
									message: '图书预借取消成功'
								});
								this.getDatas();
							} else {
								this.$message({
									type: 'error',
									message: response.data.msg
								});
							}
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '操作取消'
						});
					});
				} else {
					this.$message.error('请选择取消预借的书籍');
				}
			},
			//刷新
			reloadDatas() {
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/Reader/Preborrow/Info?readerCode=' + GloabFun.getReaderCode() + '&index=' + this.currentPage + '&pagesize=' + this.pageSize, function(response) {}, function(response) {
					this.loading = false;
					if(response.data.code === 0) {
						this.tableData = response.data.Info;
						this.totalSize = response.data.total;
						this.$message({
							type: 'success',
							message: '数据刷新成功'
						});
					} else {
						this.$message({
							type: 'error',
							message: response.data.msg
						});
					}
				});
			},
			getDatas() {
				this.loading = true;
				HttpServer.httpGet.call(this, '/Api/Reader/Preborrow/Info?readerCode=' + GloabFun.getReaderCode() + '&index=' + this.currentPage + '&pagesize=' + this.pageSize, function(response) {}, function(response) {
					this.loading = false;
					// console.log('预借',response);
					if(response.data.code === 0) {
						this.tableData = response.data.Info;
						this.totalSize = response.data.total;
					} else {
						this.$message.error(response.data.msg);
					}
				});
			}
		},
		created() {
			if(GloabFun.getReaderCode() != '') {
				this.getDatas();
			} else {
				this.$alert('读者尚未登录', this.$t('message.warning'), {
					confirmButtonText: this.$t('message.yes'),
					type: 'warning'
				});
			}
		}
	}
</script>
<style scoped lang="less">
	.name {
		color: #20a0ff;
	}
	
	.main {
		background-color: #fff;
		border-radius: 10px;
		padding-top: 5px;
	}
	
	.el-date-editor.el-input {
		width: 130px;
	}
	
	.edit-mission {
		padding-top: 50px;
		.el-dialog__header {
			background-color: #000;
		}
		.el-dialog__body {
			position: relative;
		}
		.clearfloat {
			height: 100px;
			max-height: 150px;
		}
	}
	
	._detail {
		width: 100%;
		display: block;
		margin-top: 15px;
		padding-bottom: 10px;
		border: 1px solid #E0E0E0;
		border-radius: 5px;
		.area-header {
			text-align: center;
			font-weight: bold;
			background-color: rgba(32, 159, 255, 0.2);
			border-color: rgba(32, 159, 255, 0.2);
			color: #20a0ff;
			padding: 5px;
			margin-bottom: 5px;
			border-radius: 5px;
		}
		.section:last-child {
			// margin-bottom:20px;
		}
	}
</style>